遊戲活動關卡查詢網站Day10-切開畫面(Vue：Component)

2025 iThome 鐵人賽

DAY 10

Vue.js

遊戲活動關卡查詢網站系列第 10 篇

17th鐵人賽

jack1234552000

2025-08-21 00:04:51

87 瀏覽

分享至

目標
依照線稿設計，將畫面做切割
使網站由至少5個組件(Component)組成

步驟
1.
回到線稿0.1A、0.1B
原先需求是按下活動一覽時會出現活動一覽和副本一覽

按下條件查詢時會隱藏活動一覽和副本一覽
然後顯示條件查詢
所以預計待會完成畫面會由下圖5個組件來組成
組件的命名規則可以參考其他人創作的鐵人賽文章

在src/components底下
創建五個檔案

A-enemy.vue
B-action.vue
C-event.vue
D-skillSearch.vue
E-menu.vue

接著我們使用文字編輯器(如:Notepad++)
編輯檔案內的程式
以下為檔案內的程式架構

//A-enemy.vue
<script setup>
</script>

<template>
<div>A區塊</div>
</template>

//B-action.vue
<script setup>
</script>

<template>
<div>B區塊</div>
</template>

//C-event.vue
<script setup>
</script>

<template>
<div>C區塊</div>
</template>

//D-skillSearch.vue
<script setup>
</script>

<template>
<div>D區塊</div>
</template>

//E-menu
<script setup>
import { ref } from "vue";

const menuList = ref([
 {id:1,name:"活動一覽"},
 {id:2,name:"條件查詢"},
 {id:3,name:"我的最愛"},
 {id:4,name:"支援名單"},
 {id:5,name:"查詢設定"}
])
</script>

<template>
	<div>
		<p v-for="item in menuList" :key="item.id">{{item.name}}</p>
	</div>
</template>

接著回到App.vue 將這五個組件組合起來
一開始學組件的人可能都會認為
剛才上面的A-enemy組件要放進來是使用import A-enemy的方式
但其實不是同名稱就可以了
不是喔！　不是這樣子喔！
組件的引用方式要改成import AEnemy
可以參考檔案程式架構調整如下

<template>
<div class="row" >
  <A-enemy />
  <B-action />
  <C-event />
  <D-skillSearch />
  <E-menu />
</div>

</template>

<script setup>

import AEnemy from './components/A-enemy.vue'
import BAction from './components/B-action.vue'
import CEvent from './components/C-event.vue'
import DSkillSearch from './components/D-skillSearch.vue'
import EMenu from './components/E-menu.vue'

</script>

我們可以看到在修改這些檔案的同時
畫面也會跟著變動當有錯誤時，也會即時反應錯誤和原因
下圖是目前看到的畫面

為了符合我們剛才切出來五個組件的畫面
這邊需要先引入Bootstrap 做樣式的調整
由於之前我們已經下過指令安裝了Booststrap
這邊就可以直接引入
在src/main.js中加入

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'

這邊切畫面會用到Booststrap的網格系統
網格系統由Row和Col 兩個元素組成
在寬度上把Col的寬度分成12等分
所以接下來的修改也會依照這個等分數去劃分
回到App.vue做修改
如下圖 A組件中放進col-6這個div

其他組件也是一樣再加上一些高度
App.vue內容調整如下

//App.vue Template區段
<template>
<div class="row" >
	<div class = "col-6" style="height:550px;">
		<A-enemy />
	</div>
	<div class = "col-5">
			<div class="row">
				<div class = "col-12 " style="height:250px;">
					<B-action />
				</div>
			</div>
			<div class="row">
				<div class = "col-12 " style="height:300px;">
						<C-event />
				</div>
			</div>
			<div class="row">
				<div class = "col-12 " style="height:550px">
						<D-skillSearch />
				</div>
			</div>
	</div>
	<div class="col-1 ">
		<E-menu />
	</div>
</div>


</template>

最後，再加上一點下圖紅框的樣式作顏色識別

這樣就完成我們剛才預計切版畫面的圖
剛才做顏色識別用的樣式 bg-color 如果不需要也能移除
那麼下一篇就會進到連接資料的環節了